<template>
	<!-- 上半部分 -->
	<view class="colCenCen" style="height: 430rpx;">
		<!-- 头像 -->
		<view class="radius-100 rowCenCen" style="width: 160rpx;height: 160rpx;background-color: #f0f0f0;">
			<image style="width: 80rpx;height: 80rpx;" src="../../static/my/touxiang.png" mode="aspectFill"></image>
		</view>
		<view class="font-30 mt-3">
			{{lang.weChatUser}}
		</view>
	</view>
	<view class="px-5">
		<base-divide-line></base-divide-line>
	</view>
	<!-- 下半部分 -->
	<!-- 列表 -->
	<view class="px-5 py-3 rowCenBet" v-for="(item,index) in list" :key="index" @click="()=>item.fn()">
		<text class="font-30">{{item.text}}</text>
		<text class="ml-auto text-grey mr-1">{{item.rightExtendText}}</text>
		<image class="" style="width: 50rpx;height: 50rpx;" :src="item.src" mode="aspectFill"></image>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive,
		computed
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	// 仓库语言包
	const lang = computed(() => store.state.lang)
	// 列表项的中转方法
	const list = reactive([{
			text: "购车订单",
			src: "../../static/my/1.png",
			fn() {

			}
		},
		{
			text: "精品订单",
			src: "../../static/my/1.png"
		},
		{
			text: "试驾行程单",
			src: "../../static/my/2.png"
		},
		{
			text: "我的活动",
			src: "../../static/my/3.png"
		},
		{
			text: "联系我们",
			rightExtendText: "400-999-6699",
			src: "../../static/my/4.png"
		},
		{
			text: "退出登录",
			src: "../../static/my/5.png"
		},
		{
			text: "改变语言",
			src: "../../static/my/3.png",
			fn() {
				store.commit('changeLang')
			}
		},
		{
			text: "前往原小程序",
			src: "../../static/my/3.png",
			fn() {
				uni.navigateToMiniProgram({
					appId: "wx848d8a5cf90c037c",
					success(res) {
						// 打开成功
					}
				})
			}
		}
	])
</script>

<style>

</style>
